<template>
	<view class="detailPage">
		<view class="orderStatus">
			{{orderTypeMap[orderDetail.orderInfo.orderStatus]}}
		</view>
		<view @click="choseAddress">
			<view  class="address" v-if="orderDetail.orderAddress.realname">
				<img src="@/static/tabbar/tab4/address.png" class="icon" alt="" />
				<view class="main">
					<view class="text">
						{{orderDetail.orderAddress.area}}{{orderDetail.orderAddress.street}}
					</view>
					<view class="number">
						{{orderDetail.orderAddress.realname}} {{orderDetail.orderAddress.telPhone}}
					</view>
				</view>
				<img src="@/static/tabbar/tab4/right.png" class="right-icon" alt="" />
			</view>
			<view v-else class="address no-msg">
				暂无地址,请选择
				<img src="@/static/tabbar/tab4/right.png" class="right-icon" alt="" />
			</view>
		</view>
		<view class="orderInfo" >
			<view class="storeHead">
				<img src="@/static/tabbar/tab4/store.png" class="img" alt="" />
				{{orderDetail.orderInfo.storeName}}
			</view>
			<view class="storeMain" v-for="(v,i) in orderDetail.orderGoodsList" :key="i">
				<img :src="JSON.parse(v.goodsPic)[0].url" class="img" alt="" />
				<view class="main">
					<view class="title">
						{{v.goodsName}}
					</view>
					<view class="">
						{{v.goodsSkuAttr[0].key}}
						{{v.goodsSkuAttr[0].value}}
						*
						{{v.productCount}}
					</view>
					
				</view>
				<view class="price">
					{{Number(v.goodsPrice)*v.productCount}}
				</view>
			</view>
		</view>
		<view class="express">
			<view class="one">
				<text class="left">配送方式:</text>
				<view class="">
					{{orderDetail.orderInfo.receriveType == 2?'快递':'自提'}}
				</view>
			</view>
			<view class="one">
				<text class="left">快递单号:</text>
				<view class="">
					{{orderDetail.orderInfo.orderlogisticsId}}
				</view>
			</view>
			<view class="one">
				<text class="left">创建时间:</text>
				<view class="">
					{{orderDetail.orderInfo.createTime}}
				</view>
			</view>
		</view>
		<view class="express">
			<view class="one">
				<text class="left">商品金额:</text>
				<view class="">
					{{orderDetail.orderInfo.productAmountTotal}}
				</view>
			</view>
			<view class="one">
				<text class="left">运费:</text>
				<view class="">
					{{orderDetail.orderInfo.logisticsFee}}
				</view>
			</view>
			<view class="total">
				合计: <text class="c-red">{{orderDetail.orderInfo.orderAmountTotal}}</text> 
			</view>
		</view>
		<view class="bottom">
			<view class="text">
			<!-- 	共<text class="c-red">{{number}}</text> 件
				合计 <text class="c-red"> {{cartAmount}}</text> -->
			</view>
			<view class="btn" @click="payFn">进行付款</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,computed } from 'vue';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import { storeToRefs } from 'pinia';
	// import orderApi from '@/api/orderApi.js';
	import { useOrderTypeStore } from '@/store/orderType.js';
	const orderTypeStore = useOrderTypeStore();
	const { orderTypeMap } = storeToRefs(orderTypeStore);
	const orderDetail = ref({})

	onLoad((options) => {
		if (options.id) {
			orderApi.selectOne({orderNo:options.id}).then(res=>{
				orderDetail.value = res.data[0]||{}
			})
		  }
	});
	const payFn = () =>{
		if(!orderDetail.value.orderAddress.street){
			uni.showToast({
				title:"请选择收货地址",
				icon:'none'
			})
			return
		}
		let params = {
			orderList:[
			    {
			      area: orderDetail.value.orderAddress.area,//地区
			      // couponId: [],//平台优惠券id
			      discountAmount:orderDetail.value.orderInfo.discountAmount,//优惠金额
			      // "getPhone": "string",//自取手机号
			      // "getTime": "string",//自取时间
			      isLogisticsFee: orderDetail.value.orderInfo.isLogisticsFee,//免运费（0不免运费，1免运费）
			      logisticsFee: orderDetail.value.orderInfo.logisticsFee,//运费金额
			      // "note": "",//客户备注
			      orderAmountTotal: orderDetail.value.orderInfo.orderAmountTotal,//订单金额(实际付款金额)
			      orderGoods:orderGoods.value,
			      orderType:orderDetail.value.orderInfo.orderType,//订单类型1.普通2.百货
			      // "organizeId": "string",//组织id
			      productAmountTotal: cartAmount.value,//商品总价
			      productCount: number.value,//商品数量
			      realname: orderDetail.value.orderAddress.realname,//收件人姓名
			      // "receriveType": 0,//收货类型:1自提,2物流
			      // "shopLogo": "string",
			      source: orderDetail.value.orderInfo.source,//来源(1.本系统，2.抖音，3淘宝，4快手)
			      storeId: orderList.value[0].storeId,//商家编号(商店表自动编号)
			      storeName: orderList.value[0].storeName,
			      street: orderDetail.value.orderAddress.street,//街道/详细收货地址
			      telPhone: orderDetail.value.orderAddress.telPhone,//联系电话
			    }
			  ],
			receriveType: orderDetail.value.orderInfo.receriveType
		}

		orderApi.orderAdd(params).then(res=>{
			if(res.success){
				orderApi.payFn({body:res.data.orderNo,srcAmt:res.data.orderAmountTotal}).then(res2=>{
					let opo = JSON.parse(res2.data.prepayid);
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: opo.timeStamp,
						nonceStr: opo.nonceStr,
						package: opo.package,
						signType: opo.signType,
						paySign: opo.paySign,
						
						success: function(res) {
							uni.showToast({
								title: '支付成功',
								icon:'none',
								duration: 1000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},2000)
						},
						fail: function(err) {
							uni.showToast({
								title: '支付失败',
								icon:'none',
								duration: 1000
							})
						}
					});
				})
			}
		})
		
	}
	const changeAddress = () =>{
		let params = {
		  "addressId": orderDetail.value.orderAddress.addressId,
		  "area":orderDetail.value.orderAddress.area,
		  "orderNo": orderDetail.value.orderInfo.orderNo,
		  "realname": orderDetail.value.orderAddress.realname,
		  // "storeId": "string",
		  "street": orderDetail.value.orderAddress.street,
		  "telPhone": orderDetail.value.orderAddress.telPhone,
		}
		
		orderApi.modAddress(params).then(res=>{
			if(res.success){
				uni.showToast({
					title:'地址修改成功',
					icon:'none'
				})
			}
		})
	}
	const choseAddress = () =>{
		uni.navigateTo({
			url:'/pages/zone1/address/list/index'
		})
		uni.$off('address-back');
		uni.$on('address-back', (res) => {
			console.log(res,'aaaa')
			orderDetail.value.orderAddress = res;
			changeAddress()
		});
	}
</script>

<style lang="scss">
	.detailPage{
		padding-bottom: 100rpx;
		.orderStatus{
			margin: 20rpx 30rpx;
			background-color: #fff;
			padding: 20rpx;
			box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
			border-radius: 20rpx;
		}
		.express{
			margin: 20rpx 30rpx;
			background-color: #fff;
			padding: 20rpx;
			box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
			border-radius: 20rpx;
			.one{
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #999;
				padding: 10rpx 0;
				.left{
					color: #333;
				}
			}
			.total{
				display: flex;
				justify-content: flex-end;
				font-size: 28rpx;
				color: #999;
			}
		}
		.header{
			display: flex;
			padding: 20rpx;
			.one{
				width: 48%;
				margin: 1%;
				box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx;
				background-color: #fff;
			}
			.check{
				background-color: $c-red;
				color: #fff;
			}
		}
		.no-msg{
			justify-content: space-between;color: #ddd;
		}
		.address{
			display: flex;
			align-items: center;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 0rpx 30rpx;
			box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
			.icon{
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}
			.main{
				display: flex;
				flex-direction: column;
				width: 80%;
				.text{
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
				}
				.number{
					color: #999;
					font-size: 24rpx;
				}
			}
			.right-icon{
				margin-left: 20rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		.orderInfo{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 30rpx;
			box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
			.storeHead{
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.img{
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.storeMain{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.main{
					width: 60%;
					font-size: 24rpx;
					color: #999;
					.title{
						color: #333;
						font-size: 28rpx;
					}
				}
				.price{
					font-size: 32rpx;
					font-weight: bold;
				}
				.img{
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
				}
			}
		}
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #999;
			font-size: 28rpx;
			.text{
				
			}
			.btn{
				background-color:$c-red;
				color: #fff;
				border-radius: 30rpx;
				margin-left: 20rpx;
				padding:10rpx 20rpx;
			}
		}
	}
</style>